<template>
  <div class="find">
    <hmNavBar title="发现" :showLeft="false"> </hmNavBar>
    <!-- <van-button @click="goQuestion">跳转至question</van-button> -->
    <van-pull-refresh v-model="loading" @refresh="refresh">
      <div class="content">
        <!-- 封装的单元格组件 van-cell -->
        <findCell title="面试技巧"></findCell>
        <!-- props传参 渲染并传参 -->
        <technicItem
          v-for="(item, index) in technicList"
          :key="index"
          :info="item"
        ></technicItem>

        <findCell title="市场数据"> </findCell>
        <van-tag class="tag" color="#eceaea" text-color="#76778c">{{
          chartList.city
        }}</van-tag>
        <van-tag class="tag" color="#eceaea" text-color="#76778c">{{
          chartList.position
        }}</van-tag>
        <div class="chart-area" ref="chart">
          <ul
            class="chart"
            v-for="(item, index) in chartList.yearSalary"
            :key="index"
          >
            <!-- showAll=false  只显示前3
             showAll=true   显示所有
              v-show="index < 3 || showAll"
         -->
            <li class="c1">{{ item.year.slice(0, 5) }}</li>
            <li class="c2">
              <div class="line" :style="{ width: item.per }">
                {{ item.salary }}
              </div>
            </li>
            <li class="c3">
              <i
                v-if="item.percent !== undefined && item.percent >= 0"
                class="iconfont up"
                >&#xe651;</i
              >
              <i
                v-else-if="item.percent !== undefined && item.percent < 0"
                class="iconfont down"
                >&#xe64e;</i
              >
            </li>
            <li class="c4">
              <span v-if="item.percent !== undefined">{{ item.percent }}%</span>
            </li>
          </ul>
        </div>
        <!-- 展开更多 -->
        <div class="look-more" @click="showClick">
          <div v-if="!showAll">
            <span>展开更多</span>
            <i class="iconfont">&#xe652;</i>
          </div>
          <div v-else>
            <span>收起</span>
            <i class="iconfont r180">&#xe652;</i>
          </div>
        </div>

        <findCell title="面经分享" @click.native="goShareList"></findCell>
        <div>
          <shareItem
            v-for="(item, index) in shareList"
            :key="index"
            :info="item"
          ></shareItem>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import FindCell from './FindCell'
import TechnicItem from './TechnicItem'
import { articlesTechnic, chartDataHot, articlesShare } from '@/api/find.js'
import ShareItem from './ShareItem'
export default {
  name: 'find',
  components: {
    FindCell,
    TechnicItem,
    ShareItem
  },
  data () {
    return {
      technicList: [],
      chartList: '',
      shareList: [],
      showAll: false, ////  用于控制展开与收起
      loading: false // 是否处于下拉 刷新过程中
    }
  },
  created () {
    this.refresh()
  },
  activated () {
    window.scrollTo(0, this.$route.meta.xxx)
  },
  mounted () {
    // window.console.log('高度:', this.$refs.chart.scrollHeight)
  },
  methods: {
    goQuestion () {
      // this.$router.push('/home/question?xxx=123')
      // this.$router.push({
      //   path: '/home/question',
      //   query: {
      //     xxx: 123
      //   }
      // })
      // params传参与name结合
      this.$router.push({
        name: 'question',
        params: {
          xxx: 123
        }
      })
    },
    async refresh () {
      const res = await articlesTechnic()
      this.technicList = res.data.data.list
      const res2 = await chartDataHot()
      // 在数组每一项添加一个百分比的值
      res2.data.data.yearSalary.forEach(item => {
        item.per = (+item.salary / res2.data.data.topSalary) * 100 + '%'
      })
      // 反转数组
      res2.data.data.yearSalary.reverse()
      this.chartList = res2.data.data
      // 让它默认显示前三行数据，控制它的高度就等于前三条高度
      // nextTick:将它前面的数据渲染完成之后执行
      this.$nextTick(() => {
        this.$refs.chart.style.height =
          // (this.$refs.chart.scrollHeight / res2.data.data.yearSalary.length) * 3 +
          (this.$refs.chart.scrollHeight / this.chartList.yearSalary.length) *
            3 +
          'px'
      })
      // 获取列表数据
      const res3 = await articlesShare()
      this.shareList = res3.data.data.list
      window.console.log(res3)
      this.loading = false
    },
    // 收起与展开控制
    showClick () {
      this.showAll = !this.showAll
      if (this.showAll) {
        this.$refs.chart.style.height = this.$refs.chart.scrollHeight + 'px'
      } else {
        this.$refs.chart.style.height =
          (this.$refs.chart.scrollHeight / this.chartList.yearSalary.length) *
            3 +
          'px'
      }
    },
    goShareList () {
      this.$router.push('/home/sharelist')
    }
  }
}
</script>

<style lang="less" scoped>
.find {
  .content {
    padding: 0 @p15;
    .tag {
      padding: 5px 8px;
      margin-right: 10px;
    }
    .chart-area {
      transition: height 0.6s;
      overflow: hidden;
    }
    .chart {
      display: flex;
      align-items: center;
      font-size: 12px;
      color: #545671;
      padding-top: 10px;
      .down {
        color: #fe6d67;
      }
      .up {
        color: #00d47a;
      }
      .c1 {
        width: 50px;
        text-align: left;
      }
      .c2 {
        flex: 1;
        background-color: #edbfdf;
        border-radius: 4px;
        .line {
          background-color: #fe6d67;
          border-radius: 4px;
          color: #fff;
          text-align: right;
          padding-right: 10px;
        }
      }
      .c3 {
        width: 15px;
        text-align: center;
        padding-left: 5px;
      }
      .c4 {
        width: 30px;
        text-align: right;
      }
    }
  }
  .look-more {
    font-size: 14px;
    text-align: center;
    margin-top: 20px;
    color: #999;
    .r180 {
      display: inline-block;
      transform: rotate(180deg);
    }
  }
}
</style>
